<template>
  <div class="container">
    <div class="song" v-for="item in songData" :key="item.songid">
        <div class="song-name">{{ item.name }}</div>
        <div class="song-singer">{{ item.ar[0].name }}</div>
        <img class="cover-image" :src="item.al.picUrl" />
        <audio class="audio" :src="url" autoplay controls/>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      id: "",
      url: "",
      songData: [],
    };
  },
  created() {
    this.getSongData();
    this.getSongUrl();
  },
  methods: {
    getSongData() {
        this.id=this.$route.params.id,
      axios
        .get("/api/song/detail?ids=" + this.id)
        .then((res) => {
          console.log(res.data);
          this.songData = res.data.songs;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    getSongUrl() {
      axios
        .get("/api/song/url?id=" + this.id)
        .then((res) => {
          console.log(res.data);
          this.url = res.data.data[0].url;
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
};
</script>
<style scoped>
.song {
    margin-top: 50px;
  display: inline-block;
  color: #333;
  font-size: 13px;
}
.song-name{
    font-size: 16px;
}
.song-singer {
    margin-top: 5px;
  font-size: 12px;
}
.cover-image {
    padding: 50px;
  height: 300px;
  width: 300px;
}
.audio{
    position: relative;
    top:50px;
}
</style>